/**
 * 视频模块
 * @author xiaoxujs
 */

import { Button, message } from "antd";
import { VideoBoxStyle } from "../../style";
import { FC, useCallback, useEffect, useRef, useState } from "react";
import { IBaseBarrierConfigList } from "../../../../../type/wulian";
import { WebRtcStreamerxiaoxujs } from "../../../../../assets/fun/webrtcstreamer";
import { getBaseBarrierConfigFalling, getBaseBarrierConfigLift } from "../../../api";

const VideoBox: FC<{
    title: string,
    data?: IBaseBarrierConfigList
}> = ({
    title,
    data
}) => {
        const videoEle = useRef(null);
        const videoEleAdd = useRef<any>();
        const timing = useRef<any>();

        const [taiganLoading, setTaiganLoading] = useState(false); //抬杆
        const [luoganLoading, setLuoganLoading] = useState(false); // 落杆

        // 右上角回显
        const videoShow = useCallback(async () => {
            if (data?.streamAddr) {
                if (videoEle.current) {
                    videoEleAdd.current = new WebRtcStreamerxiaoxujs(
                        videoEle.current!,
                        "http://localhost:8001"
                    );
                    timing.current = setInterval(() => {
                        if (!videoEleAdd.current.jiekou) {
                            videoEleAdd.current.connect(data.streamAddr);
                        }
                    }, 3000)
                }
            }
            // setRightTopBindData(data);
        }, [data?.streamAddr]);
        useEffect(() => {
            videoShow()

            return () => {
                if (videoEleAdd.current) {
                    console.log('销毁')
                    videoEleAdd.current.disconnect();
                    // videoEleAdd.current.destroy();
                }

                clearInterval(timing.current);
            }
        }, [videoShow])
        const handleTaigan = async () => {
            if (data) {
                setTaiganLoading(true);
                const { code, msg } = await getBaseBarrierConfigLift({ id: data.id }) as { code: number, msg: string };
                if (code === 20000) {
                    message.success('手动抬杆完成')
                } else {
                    message.error(msg)
                }
                setTaiganLoading(false);
            }

        }
        const handleLuogan = async () => {
            if (data) {
                setLuoganLoading(true);
                const { code, msg } = await getBaseBarrierConfigFalling({ id: data.id }) as { code: number, msg: string };
                if (code === 20000) {
                    message.success('手动落杆完成')
                } else {
                    message.error(msg)
                }
                setLuoganLoading(false)
            }

        }

        return <VideoBoxStyle>
            <div className="title_box">
                <div className="title_text">{title}</div>
                <div className="title_button">
                    <Button
                        onClick={() => handleTaigan()}
                        style={{ marginRight: '2rem' }}
                        icon={<span className="iconfont">&#xe718;</span>}
                        type='primary'
                        loading={taiganLoading}
                    >手动抬杆</Button>
                    <Button
                        icon={<span className="iconfont">&#xe868;</span>}
                        type='primary'
                        onClick={handleLuogan}
                        loading={luoganLoading}
                    >手动落杆</Button>
                </div>
            </div>
            <div className="shipin_box">
                <video
                    ref={videoEle}
                    id="video"
                    controls
                    muted
                    preload="auto"
                ></video>
            </div>
        </VideoBoxStyle>
    }

export default VideoBox;